<div class="post-management">
  <!-- 页面标题和操作区域 -->
  <div class="header-section">
    <div class="title-section">
      <h2>文章管理</h2>
      <p>管理博客文章内容</p>
    </div>
    <div class="action-section">
      <nz-button-group>
        <button nz-button nzType="primary" (click)="showAddModal()">
          <i nz-icon nzType="plus"></i>
          添加文章
        </button>
      </nz-button-group>
    </div>
  </div>

  <!-- 搜索和筛选区域 -->
  <div class="search-section">
    <nz-input-group [nzSuffix]="suffixTemplate" class="search-input">
      <input
        type="text"
        nz-input
        placeholder="搜索文章标题或描述..."
        [(ngModel)]="searchValue"
        (keyup.enter)="onSearch()"
      />
    </nz-input-group>
    <ng-template #suffixTemplate>
      <i nz-icon nzType="search" (click)="onSearch()" class="search-icon"></i>
    </ng-template>

    <nz-select
      nzPlaceHolder="选择分类"
      [(ngModel)]="selectedCategory"
      (ngModelChange)="onSearch()"
      nzAllowClear
      class="category-select"
    >
      <nz-option *ngFor="let category of categories" [nzValue]="category._id" [nzLabel]="category.title"></nz-option>
    </nz-select>

    <button nz-button nzType="default" (click)="onSearchReset()" class="reset-btn">
      重置
    </button>
  </div>

  <!-- 数据表格 -->
  <div class="table-section">
    <nz-table
      #basicTable
      [nzData]="posts"
      [nzLoading]="loading"
      [nzPageSize]="pageSize"
      [nzPageIndex]="pageIndex"
      [nzTotal]="total"
      [nzShowSizeChanger]="true"
      [nzPageSizeOptions]="[10, 20, 50]"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
      nzShowQuickJumper
    >
      <thead>
        <tr>
          <th>文章标题</th>
          <th>分类</th>
          <th>作者</th>
          <th>文件</th>
          <th>创建时间</th>
          <th nzWidth="200px">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let post of posts">
          <td>
            <div class="post-title-section">
              <h4>{{ post.title }}</h4>
              <p class="post-desc" [title]="post.desc">
                {{ post.desc.length > 80 ? post.desc.substring(0, 80) + '...' : post.desc }}
              </p>
            </div>
          </td>
          <td>
            <nz-tag nzColor="green">{{ getCategoryName(post.category) }}</nz-tag>
          </td>
          <td>
            <span class="author-name">{{ getAuthorName(post) }}</span>
          </td>
          <td>
            <span class="file-name" [title]="getFileName(post.file)">
              {{ getFileName(post.file) }}
            </span>
          </td>
          <td>{{ formatDate(post.createdAt) }}</td>
          <td>
            <nz-button-group>
              <button
                nz-button
                nzSize="small"
                nzType="primary"
                nzGhost
                (click)="showEditModal(post)"
              >
                <i nz-icon nzType="edit"></i>
                编辑
              </button>
              <button
                nz-button
                nzSize="small"
                nzType="primary"
                nzDanger
                nz-popconfirm
                nzPopconfirmTitle="确定删除这篇文章吗？"
                (nzOnConfirm)="deletePost(post._id)"
              >
                <i nz-icon nzType="delete"></i>
                删除
              </button>
            </nz-button-group>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>

  <!-- 添加/编辑文章模态框 -->
  <nz-modal
    [(nzVisible)]="isModalVisible"
    [nzTitle]="modalTitle"
    (nzOnCancel)="handleModalCancel()"
    (nzOnOk)="handleModalOk()"
    nzOkText="确定"
    nzCancelText="取消"
    nzWidth="600px"
  >
    <ng-container *nzModalContent>
      <form nz-form [formGroup]="postForm" nzLayout="vertical">
        <nz-form-item>
          <nz-form-label nzRequired>文章标题</nz-form-label>
          <nz-form-control [nzErrorTip]="getFormControlError('title')">
            <input
              nz-input
              formControlName="title"
              placeholder="请输入文章标题"
              maxlength="100"
            />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzRequired>文章描述</nz-form-label>
          <nz-form-control [nzErrorTip]="getFormControlError('desc')">
            <textarea
              nz-input
              formControlName="desc"
              placeholder="请输入文章描述"
              [nzAutosize]="{ minRows: 4, maxRows: 8 }"
              maxlength="500"
            ></textarea>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzRequired>分类</nz-form-label>
          <nz-form-control [nzErrorTip]="getFormControlError('category')">
            <nz-select
              formControlName="category"
              nzPlaceHolder="请选择分类"
              nzShowSearch
            >
              <nz-option
                *ngFor="let category of categories"
                [nzValue]="category._id"
                [nzLabel]="category.title"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzRequired>文件</nz-form-label>
          <nz-form-control [nzErrorTip]="getFormControlError('file')">
            <input
              nz-input
              formControlName="file"
              placeholder="请输入文件ID（需要先上传文件）"
            />
<!--            <nz-form-explain>-->
<!--              您需要先在文件管理页面上传文件，然后使用文件ID-->
<!--            </nz-form-explain>-->
          </nz-form-control>
        </nz-form-item>
      </form>
    </ng-container>
  </nz-modal>
</div>
